import React,{useState} from 'react'
import './add.less'
import {
  EyeOutlined
} from '@ant-design/icons';
import { Modal,} from 'antd'




export default function Add() {
const [open, setOpen] = useState(false);
const [width, setWidth] = useState(false)
const [isModalOpen, setIsModalOpen] = useState(false);
const [index, setIndex] = useState(1)
const [selectedText, setSelectedText] = useState('');
const [range, setrange] = useState()
function handleClick(type) {
  const data = document.querySelectorAll('.but1')
  console.log(data);
  if (!selectedText) {
      if (type == 0) {
          for (var i = 0; i < data.length; i++) {
              var span = document.createElement('span');
              span.innerText = '加粗样式'
              span.style.fontWeight = '700'
              data[i].appendChild(span)
          }
      } else if (type == 1) {
          for (var i = 0; i < data.length; i++) {
              var span = document.createElement('span');
              span.innerText = '斜体样式'
              span.style.fontStyle = 'italic'
              data[i].appendChild(span)
          }
      } else if (type == 2) {
          for (var i = 0; i < data.length; i++) {
              var h3 = document.createElement('h3');
              h3.innerText = '### 标题'
              data[i].appendChild(h3)
          }
      } else if (type == 3) {
          for (var i = 0; i < data.length; i++) {
              var span = document.createElement('span');
              span.innerText = '删除线样式'
              span.style.textDecoration = 'line-through'
              data[i].appendChild(span)
          }
      }
  } else {
      var span = document.createElement('span');
      if (type == 0) {
          span.style.fontWeight = '700'
      } else if (type == 1) {
          span.style.fontStyle = 'italic'
      } else if (type == 3) {
          span.style.textDecoration = 'line-through'
      }
      range.surroundContents(span);
      range.deleteContents()
      range.insertNode(span);
      data[1].innerHTML = data[0].innerHTML
  }

}

function DivHandleClick() {
  setrange(window.getSelection().getRangeAt(0))
  setSelectedText(window.getSelection().toString())
}

function handleInput() {
  const data = document.querySelectorAll('.but1')
  data[1].innerHTML = data[0].innerHTML
}


  return (
    
    <div className='divtop'>
        <div className='headbox'>
                <div onClick={() => handleClick(0)}>
                    <div style={{ fontWeight: '700' }}>B</div>
                    <div>加粗</div>
                </div>
                <div onClick={() => handleClick(1)}>
                    <div style={{ fontStyle: 'italic' }}>I</div>
                    <div>斜体</div>
                </div>
                <div onClick={() => handleClick(2)}>
                    <div>H</div>
                    <div>标题</div>
                </div>  
                <div onClick={() => handleClick(3)}>
                    <div>—</div>
                    <div>删除线</div>
                </div>
                <div style={{ marginLeft: '65vw' }}>
                    <button className='fabubut' onClick={() => setOpen(true )}>发布文章</button>
                </div>
        </div>
        <div className='bodybox'>
              <div className='but1' onClick={DivHandleClick} onInput={handleInput} contentEditable="true" style={{ padding: '20px', display: !width ? '' : 'none', width: width ? 0 : '49vw', height: '80vh', outline: 'medium' ,background: '#ccc' }}></div>
              <div className='show'><EyeOutlined onClick={() => setWidth(!width)} /></div>
              <div className='but1' style={{ padding: '20px', width: width ? '98vw' : '49vw', height: '80vh', outline: 'medium', }}></div>
        </div>
        <Modal
        className='modal'
        title="请选择标签"
        centered
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={1000}
      >

      </Modal>
    </div>
  )
}
